﻿@model Ja.Mvc.Acdf.Models.ChangePhotoViewModel
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/avatar")
    <script src="@Url.Content("~/Scripts/webcam.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.webcam.js")"></script>
    <script type="text/javascript">
        var rootDir = "@Url.Content("~/")";
    </script>
}

@{
    ViewBag.Title = "Change Photo";
}

<p class="text-success">@ViewBag.StatusMessage</p>

<h2>Edition du profil de @Html.DisplayFor(model => model.Pseudo)</h2>

@using (Html.BeginForm("ChangePhoto", "Manage", FormMethod.Post, new { @class = "form-horizontal", role = "form", enctype = "multipart/form-data" }))
{
    <div class="form-horizontal">
        @Html.AntiForgeryToken()
        <div class="container">
            @Html.ValidationSummary("", new { @class = "text-danger" })
            <div class="form-group">
                @Html.Label("Actual photo", new { @class = "col-md-2 control-label" })
                <div class="col-md-10">
                    <div class="row">
                        <div class="col-md-5">
                            <img src="@Html.DisplayFor(m => m.AvatarUrl)" alt="@Model.Pseudo" width="100" title="@Model.Pseudo" />
                            <span id="preview" hidden><kbd>Preview >> </kbd><img id="blah" src="#" alt="" width="100" /></span>
                            <h6><small>@Html.DisplayFor(m => m.AvatarUrl)</small></h6>
                        </div>
                        <div class="col-md-5">
                            <div id="my_camera" style="width: 320px; height: 240px"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.Avatar, new { @class = "col-md-2 control-label" })
                <div class="col-md-10">
                    @*Real Bootstrap input !*@
                    <input id="filePhoto" onchange="readURL(this)" type="file" name="Avatar" style="visibility:hidden;">
                    <div class="input-group">
                        <input id="subfile" type="text" class="form-control" placeholder="Search for image file to add..." readonly>
                        <span class="input-group-btn">
                            <a id="submitbutton" class="btn btn-primary" onclick="$('#filePhoto').click();">Browse</a>
                        </span>
                    </div>
                    @Html.ValidationMessageFor(m => m.Avatar)<br />
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.UseGravatar, new { @class = "col-md-2 control-label" })
                <div class="col-md-10">
                    @Html.CheckBoxFor(model => model.UseGravatar, new Dictionary<string, object>
                {
                    {"id", "UseGravatar"},
                    { "data-email", @Model.Email },
                    { "data-size", "100" },
                })
                    <small class="text-muted"> See <a title="My gravatar" href="https://fr.gravatar.com/" target="_blank">Gravatar Web Site</a></small>
                </div>
            </div>
            @*//[10019] Use provider avatar by default for external login ADD: this function in Profile Change photo.*@
            <div class="form-group">
                @Html.LabelFor(model => model.UseSocialNetworkPicture, new { @class = "col-md-2 control-label" })
                <div class="col-md-10">
                    @Html.CheckBoxFor(model => model.UseSocialNetworkPicture, new Dictionary<string, object>
                {
                    {"id", "UseSocialNetworkPicture"},
                    { "data-ExternalProvider", @Model.ExternalProvider },
                    { "data-ParameterProvider", @Model.ParameterProvider },
                })
                </div>
            </div>
            @*//[10019]

                //[10031] ADD: webcam function for webcamjs*@
            <div class="form-group">
                @Html.Label("WebCamJS capture", new { @class = "col-md-2 control-label" })
                <div class="col-md-10">
                    @Html.CheckBox("WebCam")
                    <input id="capture_button" type="button" value="Capture" class="btn btn-primary btn-xs" />
                    <input id="upload_button" type=button value="Upload Photo" class="btn btn-primary btn-xs">
                </div>
            </div>
            @*//[10031]

                //[10031] ADD: webcam function for jquery.webcam.js*@
            <div class="form-group">
                @Html.Label("JQWebCam capture", new { @class = "col-md-2 control-label" })
                <div class="col-md-10">
                    @Html.CheckBox("JQWebCam")
                    <input id="JQcapture_button" type="button" value="Capture" class="btn btn-primary btn-xs" />
                </div>
            </div>
            @*//[10031]

                if user don't have photo don't propose to remove it*@
            @if (!(Model.AvatarUrl.Contains("BlankPhoto.jpg")))
            {
                <div class="form-group">
                    @Html.LabelFor(model => model.IsNoPhotoChecked, new { @class = "col-md-2 control-label" })
                    <div class="col-md-10">
                        @Html.CheckBoxFor(model => model.IsNoPhotoChecked)
                    </div>
                </div>
            }
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input id="change_photo_button" type="submit" value="Change photo" class="btn btn-primary" />
                </div>
            </div>
            <div>
                <span class="btn btn-default">@Html.ActionLink("Back to profile", "Index")</span>
            </div>
        </div>
    </div>

}